<template>
	<view class="list-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input 
					v-model="searchKeyword" 
					placeholder="搜索备忘录..." 
					class="search-input"
					@confirm="searchMemo"
					@input="onSearchInput"
				/>
				<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
			</view>
		</view>
		
		<!-- 标签分类 -->
		<view class="tabs-section">
			<scroll-view class="tabs-scroll" scroll-x="true">
				<view class="tabs-container">
					<view 
						class="tab-item" 
						:class="{ 'active': activeTab === index }"
						v-for="(tab, index) in tabList" 
						:key="index"
						@click="switchTab(index)"
					>
						<text class="tab-text">{{ tab }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 备忘录列表 -->
		<scroll-view class="content-list" scroll-y="true">
			<view class="memo-items">
				<view 
					class="memo-item" 
					v-for="item in filteredMemos" 
					:key="item.id"
					@click="itemClick(item)"
				>
					<view class="memo-left">
						<view class="memo-thumbnail" v-if="item.thumb">
							<image :src="item.thumb" mode="aspectFill" class="thumb-image"></image>
						</view>
						<view class="memo-icon" v-else>
							<text class="icon-text">📝</text>
						</view>
					</view>
					
					<view class="memo-right">
						<text class="memo-title">{{ truncateText(item.title, 15) }}</text>
						<text class="memo-desc">{{ item.desc || '暂无内容...' }}</text>
						<view class="memo-meta">
							<text class="memo-time">{{ formatTime(item.add_time) }}</text>
							<view class="memo-category" v-if="item.category">
								<text class="category-tag">{{ getCategoryName(item.category) }}</text>
							</view>
							<text class="memo-important" v-if="item.important">⭐</text>
						</view>
					</view>
					
					<view class="memo-action">
						<text class="action-icon">›</text>
					</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view class="load-status">
				<text v-if="loading" class="load-text">正在加载...</text>
				<text v-else-if="filteredMemos.length === 0 && searchKeyword" class="empty-text">没有找到相关备忘录</text>
				<text v-else-if="filteredMemos.length === 0 && activeTab > 0" class="empty-text">该分类暂无备忘录</text>
				<text v-else-if="filteredMemos.length === 0" class="empty-text">还没有备忘录哦</text>
			</view>
			
			<!-- 底部占位 -->
			<view class="bottom-space"></view>
		</scroll-view>
	</view>
</template>

<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			allMemos: [], // 所有备忘录
			filteredDataList: [],
			tabList: ['全部', '普通', '工作', '生活', '学习', '旅行', '购物', '健康', '娱乐', '管理'],
			categoryMap: {
				0: 'all',
				1: 'general', 
				2: 'work', 
				3: 'life', 
				4: 'study', 
				5: 'travel', 
				6: 'shopping', 
				7: 'health', 
				8: 'entertainment',
				9: 'admin'
			},
			activeTab: 0,
			searchKeyword: '',
			loading: false
		}
	},
	
	computed: {
		// 过滤后的备忘录列表
		filteredMemos() {
			let memos = this.allMemos;
			
			// 分类筛选
			if (this.activeTab > 0) {
				const selectedCategory = this.categoryMap[this.activeTab];
				memos = memos.filter(memo => memo.category === selectedCategory);
			}
			
			// 关键词搜索
			if (this.searchKeyword.trim()) {
				const keyword = this.searchKeyword.toLowerCase();
				memos = memos.filter(memo => 
					memo.title.toLowerCase().includes(keyword) || 
					this.stripHtml(memo.content).toLowerCase().includes(keyword)
				);
			}
			
			return memos.map(item => ({
				...item,
				desc: this.truncateText(this.stripHtml(item.content), 60),
				add_time: item.createTime
			}));
		}
	},
	
	onLoad(op) {
		// 先检查登录状态
		if (!this.checkLoginStatus()) {
			return; // 如果未登录则直接返回
		}
		this.loadData();
	},
	onShow() {
		// 检查登录状态
		if (!this.checkLoginStatus()) {
			return; // 如果未登录则直接返回
		}
		this.loadData();
	},
	methods: {
		checkLoginStatus() {
			// 检查登录状态
			if (!localStorage.isLoggedIn()) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}
				});
				return false;
			}
			return true;
		},
		
		loadData() {
			if (!this.checkLoginStatus()) return;
			
			this.loading = true;
			
			// 使用本地存储获取备忘录列表
			const result = localStorage.getMemoList();
			
			this.loading = false;
			
			if (result.success) {
				this.allMemos = result.data.list || [];
			} else {
				this.allMemos = [];
			}
		},
		
		switchTab(index) {
			this.activeTab = index;
		},
		
		onSearchInput() {
			// 搜索功能已在computed中实现
		},
		
		searchMemo() {
			// 搜索功能已在computed中实现
		},
		
		clearSearch() {
			this.searchKeyword = '';
		},
		
		// 截断文本
		truncateText(text, maxLength) {
			if (!text) return '暂无内容';
			if (text.length <= maxLength) return text;
			return text.substring(0, maxLength) + '...';
		},
		
		// 去除HTML标签的工具函数
		stripHtml(html) {
			if (!html) return '';
			return html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').trim();
		},
		
		// 获取分类名称
		getCategoryName(categoryValue) {
			const categoryNames = {
				'general': '📝普通',
				'work': '💼工作',
				'life': '🏠生活',
				'study': '📚学习',
				'travel': '✈️旅行',
				'shopping': '🛒购物',
				'health': '💪健康',
				'entertainment': '🎮娱乐',
				'admin': '🔧管理'
			};
			return categoryNames[categoryValue] || '📝普通';
		},
		
		itemClick(item) {
			uni.navigateTo({
				url: '/pages/subPack/index/detail?id=' + item.id + '&title=' + encodeURIComponent(item.title || '备忘录详情')
			});
		},
		
		formatTime(time) {
			if (!time) return '';
			const date = new Date(time);
			const now = new Date();
			const diff = now - date;
			
			if (diff < 60000) return '刚刚';
			if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前';
			if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前';
			if (diff < 604800000) return Math.floor(diff / 86400000) + '天前';
			
			return date.toLocaleDateString();
		}
	}
}
</script>

<style lang="scss" scoped>
.list-container {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	z-index: 0;
}

.search-section {
	position: relative;
	z-index: 1;
	padding: 60rpx 30rpx 20rpx;
}

.search-box {
	background: #ffffff;
	border-radius: 25rpx;
	padding: 0 30rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.search-icon {
	font-size: 32rpx;
	margin-right: 20rpx;
	color: #999;
}

.search-input {
	flex: 1;
	font-size: 30rpx;
	color: #333;
	background: transparent;
	border: none;
}

.search-input::placeholder {
	color: #999;
}

.clear-icon {
	font-size: 28rpx;
	color: #999;
	padding: 10rpx;
}

.tabs-section {
	position: relative;
	z-index: 1;
	padding: 20rpx 0;
}

.tabs-scroll {
	width: 100%;
	white-space: nowrap;
}

.tabs-container {
	display: flex;
	padding: 0 30rpx;
}

.tab-item {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	padding: 16rpx 32rpx;
	margin-right: 20rpx;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.tab-item.active {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.tab-text {
	font-size: 28rpx;
	color: #fff;
	font-weight: 500;
}

.tab-item.active .tab-text {
	color: #333;
}

.content-list {
	flex: 1;
	position: relative;
	z-index: 1;
}

.memo-items {
	padding: 0 30rpx;
}

.memo-item {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.memo-item:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
}

.memo-left {
	margin-right: 30rpx;
}

.memo-thumbnail {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
	overflow: hidden;
	background: #f5f5f5;
}

.thumb-image {
	width: 100%;
	height: 100%;
}

.memo-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-text {
	font-size: 48rpx;
}

.memo-right {
	flex: 1;
}

.memo-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.memo-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 15rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.memo-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.memo-time {
	font-size: 22rpx;
	color: #999;
}

.memo-category {
	display: flex;
	align-items: center;
}

.category-tag {
	font-size: 20rpx;
	color: #666;
	background: #f0f0f0;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	margin-left: 10rpx;
}

.memo-important {
	font-size: 24rpx;
	margin-left: 10rpx;
}

.memo-action {
	margin-left: 20rpx;
}

.action-icon {
	font-size: 36rpx;
	color: #ccc;
}

.load-status {
	text-align: center;
	padding: 40rpx 0;
}

.load-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.7);
}

.empty-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.5);
}

.bottom-space {
	height: 120rpx;
}
</style>